<template>
  <el-tree
    :data="data"
    node-key="id"
    default-expand-all
    @node-drag-start="handleDragStart"
    @node-drag-end="handleDragEnd"
    @node-drop="handleDrop"
    @node-click="click"
    :draggable="true"
    :show-checkbox="showCheckBox"
    :allow-drop="allowDrop"
    :allow-drag="allowDrag"
    :props="defaultProps"
  >
  </el-tree>
</template>
<script>
import { findAllMenu, editOne, updateMenu, findMenuById } from "../../api/menu";
export default {
  props: ["showCheckBox"],
  created() {
    this.initMenu();
  },
  data() {
    return {
      data: [],
      defaultProps: {
        children: "rbacMenus",
        label: "menuname",
      },
    };
  },
  methods: {
    //初始化菜单数据：通常需要传入用户的角色信息，根据角色的不同显示的菜单是不一样的
    // admin 超级管理员要看见菜单所有内容；
    // 普通角色， role_menu中间表来操作就可以
    initMenu() {
      const userdataJSON = localStorage.getItem("userdata");
      const userdata = JSON.parse(userdataJSON);
      //先完成超级管理员的权限
      console.log(userdata.id);
      if (userdata.id == 1) {
        findAllMenu()
          .then((res) => {
            console.log(res);
            this.data = res.data;
          })
          .catch();
      } else {
        findMenuById(userdata.id)
          .then((res) => {
            console.log(res);
            this.data = res.data;
          })
          .catch();
      }
    },
    handleDragStart(node, ev) {
      console.log("drag start", node);
    },
    handleDragEnter(draggingNode, dropNode, ev) {
      console.log("tree drag enter: ", dropNode.label);
    },
    handleDragLeave(draggingNode, dropNode, ev) {
      console.log("tree drag leave: ", dropNode.label);
    },
    handleDragOver(draggingNode, dropNode, ev) {
      console.log("tree drag over: ", dropNode.label);
    },
    handleDragEnd(draggingNode, dropNode, dropType, ev) {
      console.log("tree drag end: ", dropNode && dropNode.label, dropType);
    },
    handleDrop(draggingNode, dropNode, dropType, ev) {
      //dropNode：目的地节点 after before inner两种情况
      let fid = null;
      if (dropType == "inner") {
        //我们可以直接获取dropNode的id作为，我们拖拽节点的fid = dropNode.data.id
        console.log(
          "成为- " + dropNode.data.menuname + "-的子节点",
          dropNode.data,
          dropType
        );
        fid = dropNode.data.id;
      } else {
        //after before 表示成为兄弟节点。
        console.log(
          "成为-" + dropNode.data.menuname + "-的兄弟节点",
          dropNode.parent,
          dropType
        );
        //这里要分为2种情况，一种是目标的爸的爸是null
        if (dropNode.parent.parent != null) {
          fid = dropNode.parent.data.id;
        } else {
          fid = 0;
        }
      }
      updateMenu(draggingNode.data.id, fid).then().catch();
    },
    allowDrop(draggingNode, dropNode, type) {
      // if (dropNode.data.label === "二级 3-1") {
      //   return type !== "inner";
      // } else {
      return true;
      // }
    },
    allowDrag(draggingNode) {
      return true;
    },
    // 点击事件，触发回调
    click(a1) {
      console.log(a1);
      this.$emit("clickNode", a1);
    },
  },
};
</script>